<template>
  <div>
    <div class="permissMana">
      <el-input placeholder="请输入角色英文名" size="small" v-model="role.name">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input
        placeholder="请输入角色名"
        size="small"
        v-model="role.nameZh"
      ></el-input>
      <el-button size="small" type="primary" @click="addRole">添加角色</el-button>
    </div>
    <div class="permissManaMain">
      <el-collapse v-model="activeName" accordion @change="change">
        <el-collapse-item
          v-for="(item, index) in roles"
          :key="index"
          :title="item.nameZh"
          :name="item.id"
        >
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>可访问资源</span>
                <el-button
                  style="float: right; padding: 3px 0; color: red"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteRole(item)"
                ></el-button>
              </div>
              <div>
                <el-tree
                  :data="allMenus"
                  :props="defaultProps"
                  ref="tree"
                  show-checkbox
                  :default-checked-keys="selectedMenus"
                  node-key="id"
                ></el-tree>
                <div style="display: flex; justify-content: flex-end">
                  <el-button size="mini">取消修改</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="doUpdate(item.id, index)"
                    >确认修改</el-button
                  >
                </div>
              </div>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
export default {
  name: "PermissMana",
  data() {
    return {
      role: {
        name: "",
        nameZh: "",
      },
      roles: [],
      allMenus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedMenus: [],
      activeName:-1
    };
  },
  methods: {
    change(rid) {
      if (rid) {
        this.initAllMenus();
        this.initSelectedMenus(rid);
      }
    },
    //删除角色
    deleteRole(data){
      this.$confirm("此操作将永久删除 " + data.nameZh + " 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRequest("/system/basic/permiss/role/" + data.id).then((resp) => {
            if (resp) {
              this.initRole()
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加角色
    addRole() {
      if(this.role.name && this.role.nameZh){
        this.postRequest('/system/basic/permiss/role',this.role).then(resp=>{
          if(resp){
            this.initRole()
            this.role.name = ''
            this.role.nameZh = ''
          }
        })
      }else {
        this.$message.error('输入名称为空')
      }
    },
    // 更新数据
    doUpdate(rid, index) {
      let tree = this.$refs.tree[index];
      let selectedkeys = tree.getCheckedKeys(true);
      let url = "/system/basic/permiss/?rid=" + rid;
      selectedkeys.forEach((key) => {
        url += "&mids=" + key;
      });
      this.putRequest(url).then((resp) => {
        if (resp) {
          this.initRole();
          //更新完成后关闭面板
          this.activeName = -1
        }
      });
    },
    initSelectedMenus(rid) {
      this.getRequest("/system/basic/permiss/mid/" + rid).then((resp) => {
        if (resp) {
          this.selectedMenus = resp;
        }
      });
    },
    //初始化所有菜单
    initAllMenus() {
      this.getRequest("/system/basic/permiss/menus").then((resp) => {
        if (resp) {
          this.allMenus = resp;
        }
      });
    },
    //初始化菜单导航
    initRole() {
      this.getRequest("/system/basic/permiss/").then((resp) => {
        if (resp) {
          this.roles = resp;
        }
      });
    },
  },
  mounted() {
    this.initRole();
  },
};
</script>

<style>
.permissMana {
  display: flex;
  justify-content: flex-start;
}
.permissMana .el-input {
  width: 300px;
  margin-right: 10px;
}
.permissManaMain {
  margin-top: 10px;
  width: 700px;
}
</style>